<template>
  <app-container>
    <app-block>
      <el-tabs v-model="tabType" class="wp100 vm" @tab-click="tabTypeChange">
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in COMPLAINT_SET_TAB"
          :key="index"
        />
      </el-tabs>
      <div v-if="!loading">
        <zm-button @click="onNew" t="add" class="mtb10" />
        <zm-table-data
          :data="tableParams.data"
          :columns="columns"
          :fetch="loadList"
          :table-params="tableParams"
        >
        </zm-table-data>
      </div>
    </app-block>
    <new-panel
      v-if="newParams.visible"
      v-model="newParams.visible"
      :set-type="tabType"
      :obj="newParams.obj"
      @after="loadList"
    ></new-panel>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import newPanel from './components/New'
import { complanitColumns } from './const'
import { getTypePageList } from '@/api/src/customerSet'

export default {
  name: 'ComplaintTypeSet',
  components: { newPanel },
  mixins: [tableMixin],
  data () {
    return {
      tabType: '4',
      COMPLAINT_SET_TAB: [
        { label: '投诉类型设置', value: '4' }
      ],
      newParams: {
        visible: false,
        setType: '',
        obj: {}
      },
      loading: false
    }
  },
  computed: {
    columns () {
      return complanitColumns(this)
    }
  },
  watch: {},
  created () {
  },
  methods: {
    tabTypeChange () {
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
      })
    },
    async loadList () {
      const res = await getTypePageList(
        this.assignQuery({ tabType: this.tabType })
      )
      this.initialTableData(res.list, res.count)
    },
    onNew () {
      this.newParams = {
        visible: true,
        setType: this.tabType,
        obj: {}
      }
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        setType: this.tabType,
        obj: row
      }
    }
  }
}
</script>
